<template>
  <div>
    <a-form :label-col="{ style: { width: '80px' } }">
      <div class="grid grid-cols-3 mt-3 w-1/2">
        <a-form-item label="选项1" name="">
          <a-select
            v-model:value="formState.opt1"
            placeholder="请选择"
            :allowClear="true"
            @change="handleChange"
            :options="genOptions()"
          />
        </a-form-item>
        <a-form-item label="选项2" name="">
          <a-select
            v-model:value="formState.opt2"
            placeholder="请选择"
            :allowClear="true"
            @change="handleChange"
            :options="genOptions()"
          />
        </a-form-item>
        <a-form-item label="选项3" name="">
          <a-select
            v-model:value="formState.opt3"
            placeholder="请选择"
            :allowClear="true"
            @change="handleChange"
            :options="genOptions()"
          />
        </a-form-item>
        <a-form-item
          label="计划开始时间"
          :name="['workPlanRulesDomain', 'planStartTime']"
        >
          <a-date-picker
            v-model:value="formState.four"
            :show-time="{ defaultValue: dayjs('00:00:00', 'HH:mm:ss') }"
            :show-now="false"
            value-format="YYYY-MM-DD HH:mm:00"
            format="YYYY-MM-DD HH:mm  星期dd"
            style="width: 100%"
          />
        </a-form-item>
        <a-button type="primary">点我</a-button>
      </div>
    </a-form>
    <a-radio-group
      v-model:value="roomLevelId"
      button-style="solid"
      class="!ml-auto"
    >
      <a-radio-button value="">全部</a-radio-button>
      <a-radio-button value="103584">A类</a-radio-button>
      <a-radio-button value="103585">B类</a-radio-button>
      <a-radio-button value="103586">C类</a-radio-button>
      <a-radio-button value="103587">D类</a-radio-button>
    </a-radio-group>
    <p>{{ roomLevelId }}</p>
  </div>
</template>

<script setup lang="ts">
import dayjs from "dayjs";
const roomLevelId = ref(""); 
const formState = ref({
  opt1: "",
  opt2: "",
  opt3: "",
  four: "",
});
const handleChange = (val, opt) => {
  console.log(formState.value.opt1);
  console.log(val, opt);
};
watch(
  () => formState.value.opt1,
  (newVal, oldVal) => {
    console.log("执行了watch逻辑");
  }
);
const genOptions = () => {
  const result = [];
  for (let i = 1; i <= 10; i++) {
    result.push({
      label: `选项${i}`,
      value: `选项${i}`,
    });
  }
  return result;
};
const ds1 = ref([]);
const ds2 = ref([]);
const ds3 = ref([]);
const getDs1 = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        {
          label: "选项1",
          value: "选项1",
        },
        {
          label: "选项2",
          value: "选项2",
        },
        {
          label: "选项3",
          value: "选项3",
        },
      ]);
    }, 1000);
  });
};
const getDs2 = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        {
          label: formState.value.opt1 + "选项1",
          value: formState.value.opt1 + "选项1",
        },
        {
          label: formState.value.opt1 + "选项2",
          value: formState.value.opt1 + "选项2",
        },
        {
          label: formState.value.opt1 + "选项3",
          value: formState.value.opt1 + "选项3",
        },
      ]);
    }, 1000);
  });
};
const getDs3 = () => {
  const val = formState.value.opt2;
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve([
        {
          label: val + "选项1",
          value: val + "选项1",
        },
        {
          label: val + "选项2",
          value: val + "选项2",
        },
        {
          label: val + "选项3",
          value: val + "选项3",
        },
      ]);
    }, 1000);
  });
};

const autoSelectOption = async () => {
  const ds1Result = (await getDs1()) as any;
  ds1.value = ds1Result;
  formState.value.opt1 = ds1Result[0].value;
  const ds2Result = (await getDs2()) as any;
  ds2.value = ds2Result;
  formState.value.opt2 = ds2Result[0].value;
  const ds3Result = (await getDs3()) as any;
  ds3.value = ds3Result;
  formState.value.opt3 = ds3Result[0].value;
};
autoSelectOption();
</script>

<style scoped></style>
